<template>
  <div class="content">
    <div class="cloud-header">
      <h2>领券记录</h2>
    </div>
    <div class="cloud-body">
      <!-- 订单筛选 -->
      <div class="card-screen">
        <!-- <p><label>订单类型：</label><span><Button noBorder :text-color="screen.type == 'all'?'primary' :'default'" @click="intClick('type','all')">全部</Button><Button noBorder :text-color="screen.type == 'pre'?'primary' :'default'" @click="intClick('type','pre')">预订单</Button></span></p> -->
        <p>
          <label>下单日期：</label>
          <span>
            <Button noBorder :text-color="screen.date == 'all'?'primary' :'default'" @click="setDate('all')">全部</Button>
            <Button noBorder :text-color="screen.date == 'three'?'primary' :'default'" @click="setDate('three')">近三日</Button>
            <DateRangePicker class="card-date" v-model="time" @confirm="setDate('time')" :format="format" placeholder="时间区间"></DateRangePicker>
          </span>
        </p>
        <p>
          <label>订单状态：</label>
          <span>
            <Button noBorder :text-color="screen.status == 'all'?'primary' :'default'" @click="intClick('status','all')">全部</Button>
            <Button noBorder :text-color="screen.status == 'going'?'primary' :'default'" @click="intClick('status','going')">未核销</Button>
            <Button noBorder :text-color="screen.status == 'end'?'primary' :'default'" @click="intClick('status','end')">已核销</Button>
          </span>
        </p>
      </div>
      <Table :datas="datas" :stripe="true" :loading="loading">
        <TableItem title="卡券号" :width="260" prop="cardId"> </TableItem>
        <TableItem title="卡券类型">
          <template slot-scope="{data}">
            {{ available_type(data.type)}}
          </template>
        </TableItem>
        <TableItem title="领券人">
          <template slot-scope="{data}">
            {{ data.users[0].nickname}}
          </template>
        </TableItem>
        <TableItem title="状态">
          <template slot-scope="{data}">
            {{available_state(data.status)}}
          </template>
        </TableItem>
        <TableItem title="领取时间">
          <template slot-scope="{data}">
            {{ data.creation_time}}
          </template>
        </TableItem>
        <TableItem title="核销时间">
          <template slot-scope="{data}">
            {{ data.use_time?data.use_time:'------'}}
          </template>
        </TableItem>
        <!-- <TableItem title="操作">
          <template slot-scope="{data}">
            -
          </template>
        </TableItem> -->
        <div slot="empty">暂时无数据</div>
      </Table>
      <Pagination style="margin-top: 20px;" v-model="pagination" align="center" @change="currentChange" small></Pagination>
    </div>
  </div>
</template>
<script type="text/javascript">
  import date from '@/utils/datetime'
// import empty from './empty.vue'
export default {
  components: {
    // empty
  },
  data() {
    return {
      loading: false,
      datas: [],
      time: {},
      _uniqueid: '',
      creation_time: '',
      screen: {
        date: 'all',
        status: 'all',
      },
      format: 'YYYY-MM-DD',
      //分页数据
      pagination: {
        page: 1,
        size: 10,
        total: 10
      }
    };
  },
  /**
   * 计算属性
   * @type {Object}
   */
  computed: {

  },
  /**
   * 页面渲染前
   * @return {[type]} [description]
   */
  created() {

  },
  /**
   * 数据监听
   * @type {Object}
   */
  watch: {

  },
  /**
   * 页面加载执行
   * @return {[type]} [description]
   */
  mounted() {
    this._uniqueid = this.$cloud.userInfo()._uniqueid;
    this.dataCount();
    this.dataList();
  },
  methods: {
    dataList() {
      let where = {_uniqueid:this._uniqueid}
      if (this.screen.date !== 'all') {
        where.creation_time = this.creation_time
      }
      if (this.screen.status !== 'all') {
        where.status = this.screen.status === 'going' ? '1' : '2';
      }
      this.$cloud.view('card_log', 'users', '_userid = _id').where(where).order('_id DESC').page(this.pagination.page, this.pagination.size).select().then(data => {
        console.log('查看', data);
        this.datas = data;
      }).catch(error => {

      });
    },
    dataCount() {
      let where = {_uniqueid:this._uniqueid}
      if (this.screen.date !== 'all') {
        where.creation_time = this.creation_time
      }
      if (this.screen.status !== 'all') {
        where.status = this.screen.status === 'going' ? '1' : '2';
      }
      this.$cloud.view('card_log', 'users', '_userid = _id').where(where).count().then(res => {
        this.pagination.total = res
      }).catch(error => {

      });
    },
    //分页
    currentChange(value) {
      this.pagination = value
      this.dataList()
    },
    available_type(value) {
      switch (value) {
        case 'DISCOUNT':
          return '折扣券';
        case 'GIFT':
          return '兑换券';
        case 'CASH':
          return '代金券';
      }
    },
    available_state(value) {
      switch (value) {
        case '1':
          return '待使用';
        case '2':
          return '已使用';
        case '3':
          return '已失效';
      }
    },
    //时间设置
    setDate(value) {
      let start_time = ''
      let end_time = ''
      this.screen.date = value
      switch (value) {
        case 'all':
          this.time = {}
          start_time = '2020-01-01 00:00:00';
          end_time = date.getDateTime();
          break;
        case 'three':
          this.time = {}
          let now_time = date.getDate() + " 00:00:00";
          start_time = date.getBefore(now_time, 2, 'date') + " 00:00:00";
          end_time = date.getDateTime();
          break;
        case 'time':
          start_time = this.time.start + " 00:00:00"
          end_time = this.time.end + " 23:59:59"
          break;
      }
      this.creation_time = ['>', start_time, '<', end_time];
      this.dataCount();
      this.dataList()
    },

    /**
     * 点击事件
     * @return {[type]} [description]
     */
    intClick(params, value) {
      this.screen[params] = value;
      this.dataCount();
      this.dataList()
    },
    formatDate(date) {
      var date = new Date(date);
      var YY = date.getFullYear() + '-';
      var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
      var DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());
      var hh = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
      var mm = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
      var ss = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
      return YY + MM + DD + " " + hh + mm + ss;
    }
  }
};

</script>
<style lang="less" scoped="true">
.card-screen {
  a {
    display: inline-block;
    margin: 0 10px;
  }

  .card-date,
  .card-date .h-input input {
    color: #3788ee !important;
  }
}
</style>
